<template>
  <div class="main-container">
    <div class="main-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>活动报名报表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
     <div class="wrap">
      <div class="content">
        <div class="search-container">
          <el-form class="search-form" :model="form" ref="form" label-width="90px" label-position="right" inline>
            <el-row>
              <el-form-item label="问题名称" prop="questionName">
                <el-input v-model="form.questionName"></el-input>
              </el-form-item>
              <el-form-item label="学员姓名" prop="customerName">
                <el-input v-model="form.customerName"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button @click="onReset">重置</el-button>
                <el-button @click="showTotal=!showTotal" type="text">{{showTotal ? '收起' : '展开'}}<i class="el-icon--right" :class="{'el-icon-arrow-down':!showTotal,'el-icon-arrow-up':showTotal}"></i></el-button>
              </el-form-item>
            </el-row>
            <el-row v-if="showTotal">
              <el-form-item label="学员手机号" prop="customerPhone">
                <el-input v-model="form.customerPhone"></el-input>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div class="mt-10">
          <el-table :data="data" v-loading="loading">
            <el-table-column type="selection" width="55" fixed>
            </el-table-column>
            <el-table-column prop="questionName" label="问题" min-width="200" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="nickName" label="学员姓名" min-width="130" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phoneNumber" label="学员手机号" min-width="150" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="createDate" label="提问时间" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                {{$utils.dateFormat(new Date(scope.row.createDate), 'yyyy-MM-dd hh:mm:ss')}}
              </template>
            </el-table-column>
            <!-- <el-table-column label="操作"  width="120" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click="doEdit(scope.row.qaid)">回答问题</el-button>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
        <div class="mt-10 t-right" v-if="total > 0">
          <el-pagination
            background
            :current-page="currentPage"
            :total="total"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        type: '1',
        data: []
      }
    },
    methods: {
      
    }
  }
</script>
